<template>
  <div class="sop-table-wrap">
    <div class="card-head">
      <el-form :inline="true" :model="queryParams" size="small" class="queryform">
        <el-form-item label="">
          <el-input
            placeholder="搜对象名称"
            v-model="queryParams.name"
            class="input-with-select"
          >
            <el-select
              v-model="queryParams.user"
              slot="prepend"
              placeholder="请选择"
              style="width: 80px"
            >
              <el-option label="客户" :value="1"></el-option>
              <el-option label="客户群" :value="2"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select
            v-model="queryParams.user"
            placeholder="请选择"
            style="width: 115px"
          >
            <el-option label="企业模板库" :value="1"></el-option>
            <el-option label="个人模板库" :value="2"></el-option>
          </el-select>
          <el-select
            v-model="queryParams.user"
            placeholder="请选择"
            style="width: 250px"
          >
            <el-option label="企业模板库" :value="1"></el-option>
            <el-option label="个人模板库" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=""
          ><el-checkbox v-model="queryParams.checked"
            >有消息发送失败</el-checkbox
          ></el-form-item
        >
        <el-form-item label="">
          <el-button type="primary" plain @click="handleMoreQuery">更多筛选</el-button>
        </el-form-item>
      </el-form>
      <span>计划任务数：0/5000</span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="80" align="center" />
      <el-table-column prop="id" label="对象" width="240">
        <template slot-scope="scope">
          <div class="flex">
            <img
              src="https://cdn-qyb-hz.wxb.com/public/wechatdata/avatar/5424982/e0956eb16bf6ffa4e3123799e3c31ae3.png"
              alt=""
              class="useravatar mr-12"
            />
            <div>
              <div>群聊</div>
              <div class="flex">
                <span class="grouptag c_fff br_4 f-12 flexcenter">群主</span>
                <span class="f-12 c_666">群成员2</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="调用的模板">
        <template slot-scope="scope">
          <span>{{ scope.row.way }}1111</span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="创建时间"> </el-table-column>
      <el-table-column prop="time" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.way }}标准SOP</span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="状态">
        <template slot-scope="scope">
          <div class="c_52c41a flex aligncenter">
            <div class="dot mr-8 dot_success"></div>
            发送完成
          </div>
          <div>{{ scope.row.time }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="text" size="small" class="mr-10"
                     v-hasPermi="['planTask:view']"
            >详情</el-button
          >
          <el-popconfirm
            :title="`你确定要删除吗？`"
            icon="el-icon-warning"
            @confirm='handleDelete(scope.row)'
          >
            <el-button type="text" size="small" slot="reference" v-hasPermi="['planTask:del']">删除</el-button>
          </el-popconfirm>
          <!-- <el-button @click="handleDelete(scope.row)" type="text" size="small"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
      <template slot="empty">
        <TableEmpty />
      </template>
    </el-table>
    <PtaskDetail :visible.sync="showTask" :row="rowitem" />
    <el-drawer
      title="更多筛选"
      size='600px'
      :visible.sync="showdrawer"
      :before-close="handleClose">
        <el-form ref="form" :model="form" size="small" label-width="120px" class="pt-24 pr-40">
            <el-form-item label="任务发送日期:">
              <el-date-picker
                v-model="form.time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                class="w_full">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="任务创建时间:">
              <el-date-picker
                v-model="form.times"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="w_full">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="类型：">
                <el-select v-model="form.region" placeholder="全部类型" class="w_full" clearable>
                  <el-option v-for="(item,index) in typeList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序：">
                <el-select v-model="form.region" placeholder="全部类型" class="w_full" @change="handleQuery">
                  <el-option label="按创建时间排序" :value="1"></el-option>
                  <el-option label="按下次发送时间排序" :value="2"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-drawer>
  </div>
</template>
<script>
import PtaskDetail from "./PtaskDetail.vue";
export default {
  data() {
    return {
      taskList: [
        { value: "1", label: "创建中" },
        { value: "2", label: "下发中" },
        { value: "3", label: "下发完成" },
        { value: "6", label: "已取消" },
      ],
      accountList: [
        { value: "", label: "全部" },
        { value: "1", label: "员工1" },
        { value: "2", label: "员工2" },
        { value: "3", label: "员工3" },
      ],
      queryParams: {
        user: 1,
        name: "",
        checked: false,
        times: "",
      },
      form:{},
      typeList:[
        {value:'',label:"全部类型"},
        {value:1,label:"标准sop"},
        {value:2,label:"标签sop"},
        {value:3,label:"新客户sop"},
        {value:4,label:"群sop"},
      ],
      showdrawer:false,
      tableData: [
        {
          id: "1043909",
          name: "我的模板",
          time: "2024-05-0714:49",
          createName: "主账号",
          status: 1,
        },
      ],
      rowitem: null,
      showTask: false,
      multipleSelection: [],
      multiple: false,
    };
  },
  components: {
    PtaskDetail,
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path);
    },

    handleQuery(){},

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multipleSelection = selection.map((item) => item.id);
      //   this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    handleModel(row) {
      this.$router.push({ name: "Detailsop", query: { id: row.id } });
    },

    handleMoreQuery(){
        this.showdrawer = true
    },

    handleClose(){
        this.showdrawer = false
    },

    handleDetail(row) {
      this.rowitem = row;
      this.showTask = true;
    },

    handleDelete(row) {
        this.$message({
            type: "success",
            message: "取消成功!",
          });
    //   this.$msgBox
    //     .showMsgBox({
    //       title: "确定取消SOP任务？",
    //       cancelBtnText: "算 了",
    //       confirmBtnText: "取消任务",
    //       content:
    //         "还未下发的终止下发；已下发至各个企微号的计划任务，未完成的全部取消发送，已发送的不处理。请谨慎操作。",
    //     })
    //     .then(async (val) => {
    //       this.$message({
    //         type: "success",
    //         message: "取消成功!",
    //       });
    //     })
    //     .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.queryform{
    .el-form-item {
    margin-bottom: 0;
    }
}
.sop-table-wrap {
  background: #fff;
  width: 100%;

  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
  }
}
.statusdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.grouptag {
  width: 36px;
  height: 20px;
  background: #3070ff;
  border: 1px solid #fff;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  &.dot_success{
    background-color: #52c41a;
  }
}
</style>
